<script setup>
// import { nextTick, ref } from 'vue'
import { useDark, useToggle } from '@vueuse/core'

// eslint-disable-next-line vue/require-prop-types
const model = defineModel({ required: true })

const isDark = useDark()
const toggleDark = async (e) => {
  document.documentElement.style.setProperty('--x', e.clientX + 'px')
  document.documentElement.style.setProperty('--y', e.clientY + 'px')
  // const myDocument = document
  // if (!myDocument.startViewTransition) {
  useToggle(isDark)()
  //   return
  // }
}
</script>

<template>
  <div
    class="my-4 mx-1 text-center flex flex-col justify-center items-center gap-2 overflow-hidden"
    size="large"
  >
    <el-button class="px-0 w-8 border-none" :icon="isDark ? 'Moon' : 'Sunny'" @click="toggleDark" />
    <el-dropdown trigger="click">
      <el-button class="px-2" icon="Operation" />
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item v-for="item in model" :key="item.label" @click="item.click">{{
            item.label
          }}</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<style scoped></style>
